import { VerticalBox, HorizontalBox } from "std-widgets.slint";
import { Theme } from "globals.slint";
import { HyperLink } from "hyperlink.slint";

export component AboutPage inherits Rectangle {
    //my initial attempts to add the logo to the theme weren't working. Passing it all the way through
    //from multiple components feels a bit hacky, but it was a quick way to test the rest of my logic
    //in regartds to updating the SVG and re-applying the logo
    in-out property<image> logo <=> hl-logo.source;
    background: Theme.background-light;
    VerticalBox {
        spacing: 5px;
        
        Text {
            text: "About";
            font-size: 11pt;
            //font-weight: 500;
            horizontal-alignment: center;
        }
        HorizontalLayout {
            alignment: center;
            hl-logo := Image {
                source: @image-url("../assets/logo.svg");
                height: 75px;
                width: 75px;
            }
        }

        Text {
            text: "Tomotroid";
            font-size: 16pt;
            color: Theme.accent;
            horizontal-alignment: center;
        }

        HorizontalBox {
            alignment: center;
            spacing: 3pt;
            Text {
                text: "A themeable pomodoro timer created to learn";
                font-size: 11pt;
                color: Theme.background-lightest;
            }
            HyperLink {
                text: "Slint";
                url: "https://slint.dev";
                link-color: Theme.background-lightest;
                hvr-color: Theme.accent;
                font-size: 11pt;
            }
        }

        HorizontalBox {
            alignment: center;
            spacing: 3pt;
            Text {
                text: "Design modeled after";
                font-size: 11pt;
                color: Theme.background-lightest;
                padding: 0px;
            }
            HyperLink {
                text: "Pomotroid.";
                url: "https://splode.github.io/pomotroid/";
                link-color: Theme.background-lightest;
                hvr-color: Theme.accent;
                font-size: 11pt;
                padding: 0px;
            }
        }

        HorizontalBox {
            alignment: center;
            Text {
                text: "Version 0.1.0";
                font-size: 11pt;
                color: Theme.background-lightest;
            }
            HyperLink {
                text: "(release notes)";
                url: "Get a link for release notes";
                link-color: Theme.background-lightest;
                hvr-color: Theme.accent;
                font-size: 11pt;
            }
        }
        HyperLink {
            text: "License and Documentation";
            url: "https://github.com/Vadoola/Tomotroid/blob/main/LICENSE";
            link-color: Theme.background-lightest;
            hvr-color: Theme.accent;
            font-size: 11pt;
            horizontal-alignment: center;
        }
    }
}